<div class="mx-auto max-w-2xl lg:text-center">
    <h2 class="text-base font-semibold leading-7 text-indigo-600"><%= @section %></h2>
    <p class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"><%= @title %></p>
    <p class="mt-6 text-lg leading-8 text-gray-600"><%= @description %></p>
</div>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
    <dl class="grid max-w-xl grid-cols-1 gap-y-10 gap-x-8 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
        <%= for feature <- @features do %>
            <div class="relative pl-16">
                <dt class="text-base font-semibold leading-7 text-gray-900">
                    <div class="absolute top-0 left-0 flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600">
                        <Icon.draw name={feature.icon} kind="outline" class="text-white" />
                    </div>
                    <%= feature.name %>
                </dt>
                <dd class="mt-2 text-base leading-7 text-gray-600">
                    <%= feature.description %>
                    <p class="mt-3">
                        <a href={feature.url} class="text-sm font-semibold leading-6 text-indigo-600">Learn more <span aria-hidden="true">→</span></a>
                    </p>
                </dd>
            </div>
        <% end %>
    </dl>
</div>
